<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Modify Event</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        
        <p:layout style="min-width:1000px;min-height:1000px;">
            <p:layoutUnit position="west" resizable="true" size="220" minSize="80" maxSize="300">
                    <h:form id="button">
                        <br></br>
                        <p:commandButton id="viewPersonal" value="Personal Page" action="#{searchUserBean.uploadPersonalPage()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="newEvent" value="New Event" action="new-event" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchUser" value="Browse User" action="#{searchBean.browseUsers()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchEvent" value="Search Event" action="search-event-page" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="logout" value="Logout" action="#{loginBean.logout()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="mainPage" value="Main Page" action="main-page?faces-redirect=true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        </h:form>
                </p:layoutUnit>
            
                <p:layoutUnit position="center" resizable="true" size="700" minSize="100" maxSize="600">
                    <h:form id="modify_event">
                        <p:growl id="growl" autoUpdate="true" showSummary="false" redisplay="false" showDetail="true" sticky="true" />
                        <p:panel id='eventPanel' header='Modify Event Details' style="border: none">
                        <h:panelGrid columns="2" id='ModifyEventForm' style="border-color: #ffffff;width: 800px;width:100%" cellpadding="4" columnClasses="label,value">
                            <h:outputLabel style="font-weight: bold;" for="nameU">Name:</h:outputLabel>
                            <p:inputText id="nameU" value="#{showEventBean.selectedEvent.name}">
                            <p:watermark for="nameU" value="#{showEventBean.selectedEvent.name}" />
                            </p:inputText>
                            <h:outputLabel style="font-weight: bold;" for="descriptionU">Description:</h:outputLabel>
                            <p:inputTextarea id="descriptionU" value="#{showEventBean.selectedEvent.description}" >
                            <p:watermark for="descriptionU" value="#{showEventBean.selectedEvent.description}" />
                            </p:inputTextarea>
                            <h:outputLabel style="font-weight: bold;" for="st_dateU">Starting Date:</h:outputLabel>
                            <p:calendar id="st_dateU" value="#{showEventBean.selectedEvent.starting_date}" navigator="true" mode="popup" showOn="button" mindate="#{eventBean.stDate_lowerBound}"  required="true">
                                <p:ajax event="dateSelect" listener="#{eventBean.changeEnDate_lowerBound}" update="en_dateU"  />
                                <p:watermark for="st_dateU" value="Chose a day" />
                            </p:calendar>
                            <p:outputLabel style="font-weight: bold;" for="st_timeU">Starting Time:</p:outputLabel>
                            <p:calendar id="st_timeU" value="#{showEventBean.selectedEvent.startingTime}" timeOnly="true" pattern="HH:mm" required="true" >
                            <p:watermark for="st_timeU" value="Insert when the event starts" />
                            </p:calendar>
                            <h:outputLabel style="font-weight: bold;" for="en_dateU">Ending Date:</h:outputLabel>
                            <p:calendar id="en_dateU" value="#{showEventBean.selectedEvent.ending_date}" navigator="true" mode="popup" showOn="button" mindate="#{eventBean.enDate_lowerBound}"  required="true">
                                <p:watermark for="en_dateU" value="Chose a day"  />
                            </p:calendar>
                            <p:outputLabel style="font-weight: bold;" for="en_timeU">Ending Time:</p:outputLabel>
                            <p:calendar id="en_timeU" value="#{showEventBean.selectedEvent.endingTime}" timeOnly="true" pattern="HH:mm" required="true" >
                            <p:watermark for="en_timeU" value="Insert when the event starts" />
                            </p:calendar>
                            <p:outputLabel style="font-weight: bold;" for="place">Place:</p:outputLabel>
                            <p:inputText id="place" value="#{showEventBean.selectedEvent.place}">
                            <p:watermark for="place" value="#{showEventBean.selectedEvent.place}" />
                            </p:inputText>
                            <p:outputLabel style="font-weight: bold;" for="typeU">Location Type:</p:outputLabel>
                            <p:selectOneRadio id="typeU" value="#{showEventBean.selectedEvent.type}" layout="lineDirection" required="true">
                                <f:selectItem itemLabel="Indoor" itemValue="false" />
                                <f:selectItem itemLabel="Outdoor" itemValue="true" />
                            </p:selectOneRadio>
                            <p:outputLabel style="font-weight: bold;" for="p_levelU">Privacy Level:</p:outputLabel>
                            <p:selectOneRadio id="p_levelU" value="#{showEventBean.selectedEvent.privacyLevel}" layout="lineDirection" required="true">
                                <f:selectItem itemLabel="Public" itemValue="true" />
                                <f:selectItem itemLabel="Private" itemValue="false" />
                            </p:selectOneRadio>
                            <p:outputLabel for="participants">Participants:</p:outputLabel>
                            <p:panelGrid id="participants" columns="1">
                                <p:autoComplete value="#{showEventBean.selectedEvent.pendingUsers}" 
                                                completeMethod="#{eventBean.completeUser}" 
                                                multiple="true"
                                                var="user" 
                                                itemLabel="#{user.username}"
                                                itemValue="#{user.username}"
                                                forceSelection="true"> 
                                <p:ajax event="itemSelect" listener="#{eventBean.addToPending}" update="pending_users"  />
                                </p:autoComplete>
                                <p:dataList id="pending_users" value="#{eventBean.invitations}" var="user" itemType="disc" >
                                  #{user.username}, #{user.city} 
                                 </p:dataList>
                            </p:panelGrid>
                            <f:facet name="footer">
                                <p:commandButton id="updateEvent" value="Update" action="#{eventBean.modifyEvent()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                                    <f:setPropertyActionListener value="#{showEventBean.selectedEvent}" target="#{eventBean.event}" />  
                                </p:commandButton>
                            </f:facet>
                        </h:panelGrid>
                        </p:panel>
            
                    </h:form>
                </p:layoutUnit>
        </p:layout>  
    </h:body>
</html>

